<!-- WEB 仓库 》 查询 -->

<template>
  <div :class="className">
    <div :class="`${className}-btn`">
      <slot name="btn" />
    </div>

    <EasyScroll :class="paramClass" hasX>
      <slot />
    </EasyScroll>

    <BtnSearch v-if="!noSearch" :class="searchClass" v-bind="searchBtn" @click="toSearch" />

    <BtnSuper v-if="hasSuper" v-bind="superBtn" @click="toToggle" />

    <div :class="superClass">
      <slot name="super" />

      <div :class="`${className}-super-btn`">
        <BtnReset v-if="!superNoReset" v-bind="resetBtn" @click="toReset" />

        <BtnSearch v-bind="searchBtn" @click="toSearch" />
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../mixPath'
import WebForm from '../WebForm'

const name = 'WebSearch'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      isSuper: false, // 是否显示高级查询
      isReset: false, // 是否进行参数重置
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 尺寸
     */
    size: WebForm.computed.size,

    /**
     * 是否已禁用
     */
    isDisabled() {
      const { $store, pre, disabled } = this
      if ($store && CORE.isBoolean($store.getters[`${pre}inited`]) && !$store.getters[`${pre}inited`]) return false
      return disabled
    },

    /**
     * 是否有高级查询
     */
    hasSuper() {
      if (!this.$scopedSlots) return false
      return this.$scopedSlots.super
    },

    /**
     * 参数样式类
     */
    paramClass() {
      const { className, isSuper, noMax, hasLabel } = this
      const superStr = isSuper ? 'hide' : 'show'
      const noMaxStr = noMax ? ' no-max' : ''
      const hasLabelStr = hasLabel ? ' has-label' : ''
      return `${className}-param param-${superStr}${noMaxStr}${hasLabelStr}`
    },

    /**
     * 查询按钮样式类
     */
    searchClass() {
      const { isSuper } = this
      const superStr = isSuper ? 'hide' : 'show'
      return `search-${superStr}`
    },

    /**
     * 高级面板样式类
     */
    superClass() {
      const { className, isSuper, noLabel, size } = this
      const superStr = isSuper ? 'show' : 'hide'
      const noLabelStr = noLabel ? ' no-label' : ''
      const sizeStr = size ? ` size-${size}` : ''
      return `${className}-super super-${superStr}${noLabelStr}${sizeStr}`
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击查询
     */
    toSearch() {
      const { onSearch, state, commit, superAutoSearch } = this

      setTimeout(() => {
        if (onSearch) onSearch()
        else if (CORE.isJSON(state.INIT_PARAM)) {
          state.param.page = 1
          commit(state.MAIN_START || 'startList')
        } else if (CORE.isJSON(state.INIT_INFO_PARAM)) {
          commit(state.MAIN_START || 'startInfo')
        }

        if (!superAutoSearch) this.isSuper = false

        this.$emit('search')
      }, 10)
    },

    /**
     * 点击高级
     */
    toToggle() {
      this.isSuper = !this.isSuper
    },

    /**
     * 点击重置
     */
    toReset() {
      const { onReset, state, superResetSearch, toSearch, commit } = this

      if (onReset) onReset()
      else if (CORE.isJSON(state.INIT_PARAM)) {
        commit('setParam')
        superResetSearch && toSearch()
      } else if (CORE.isJSON(state.INIT_INFO_PARAM)) {
        commit('setInfoParam')
        superResetSearch && toSearch()
      }

      this.$emit('reset')
    },
  },
}
</script>
